﻿<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button v-if="orgType==1" type="primary" icon="el-icon-plus"  @click="opAdd">新增</el-button>
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px;margin-right: 20px;">
                    <el-row type="flex" style="flex-wrap:wrap">
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="赠送编号" label-width="100px" style="width: 100%">
                                <el-input
                                    placeholder="---请输入赠送编号---"
                                    v-model="queryList.giveOrderCode"
                                    style="width: 100%"
                                />
                            </el-form-item>
                          
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="赠送人" label-width="100px" style="width: 100%">
                                <el-input
                                    placeholder="---请输入赠送人---"
                                    v-model="queryList.giveName"
                                    style="width: 100%"
                                />
                            </el-form-item>
                            
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="门店名称" label-width="100px" style="width: 100%">
                                <sc-auto-complete
                                    :orgType="2"
                                    :queryType="'store/search'"
                                    :placeholder="'---请输入门店名称---'"
                                    v-model="queryList.storeName"
                                    @handleSelect="(e)=>{this.queryList.storeName=e.storeName}"
                                    style="width: 100%"
                                />
                            </el-form-item>
                           
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="赠送日期" label-width="100px" style="width: 100%">
                                <el-date-picker
                                    v-model="queryList.giveDates"
                                    type="datetimerange"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    range-separator="-"
                                    unlink-panels="true"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    style="width: 100%"
                                    :default-time="defaultTime"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="物料编码" label-width="100px" style="width: 100%">
                                <el-input
                                    placeholder="---请输入物料编码---"
                                    v-model="queryList.materialCode"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="物料名称" label-width="100px" style="width: 100%">
                                <el-input
                                    placeholder="---请输入物料名称---"
                                    v-model="queryList.materialName"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="采购单位" label-width="100px" style="width: 100%">
                                <sc-auto-complete
                                :orgType="1"
                                :queryType="'purchase-unity/search'"
                                :placeholder="'---请输入采购单位---'"
                                v-model="queryList.purchaseUnityName"
                                @handleSelect="(e)=>{this.queryList.purchaseUnityName=e.purchaseUnityName}"
                                style="width: 100%"
                                />
                            </el-form-item>
                           
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="赠送模式" label-width="100px" style="width: 100%">
                                <el-select placeholder="---赠送模式---" v-model="queryList.giveType" style="width: 100%">
                                                <el-option
                                                    v-for="item in optionsGiveType"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
            <scTable
                ref="mytable"
                :queryType="'give-order/item-pages'"
                :data="listData"
                :queryList="queryList"
                :column="columnList"
                :orderList="OrderList"
                :sort-orders="['ascending', 'descending']"
                @selection-change="selectionChange"
                :row-class-name="setRowClass"
                show-summary
                remoteSummary
            >
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column prop="giveDate" label="赠送时间" width="120" sortable>
                    <template #default="scope">{{scope.row.giveDate?.slice(0,10)}}</template>
                </el-table-column>
                <el-table-column prop="giveOrderCode" label="赠送编号" width="140" sortable>
                    <template #default="scope"> <span class="el-span-text" @click="opShow(scope.row, scope.$index)">{{scope.row.giveOrderCode}}</span></template>
                </el-table-column>
                <el-table-column prop="storeName" label="收货单位" width="150" sortable></el-table-column>
                <el-table-column prop="materialName" label="物料名称" width="150" ></el-table-column>
                <el-table-column prop="materialSpecs" label="物料规格" width="120" ></el-table-column>
                <el-table-column prop="qty" label="赠送数量" width="110" ></el-table-column>
                <el-table-column prop="unitName" label="单位" width="90" ></el-table-column>
                <el-table-column prop="purchaseSaleTypeDesc" label="赠送模式" width="110"  v-if="orgType==1"></el-table-column>
                <el-table-column prop="purchaseUnityName" label="赠送单位" width="110" ></el-table-column>
                <el-table-column prop="giveName" label="赠送人" width="110" ></el-table-column>
                <el-table-column prop="materialCode" label="物料编码" width="120" ></el-table-column>
               
                <el-table-column prop="applyOrderCode" label="关联要货订单" width="160" sortable>
                    <template #default="scope"> <span class="el-span-text" @click="opApplyShow(scope.row, scope.$index)">{{scope.row.applyOrderCode}}</span></template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="120" sortable><template #default="scope">{{scope.row.statusDesc}}</template></el-table-column>
                <el-table-column prop="remarks" label="备注" width="120" ></el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="200">
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opShow(scope.row, scope.$index)"
                            >查看</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                v-show="scope.row.status==0"
                                @click="opEdit(scope.row, scope.$index)"
                            >编辑</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                v-show="scope.row.taskStatus<2"
                                @click="opTask(scope.row, scope.$index)"
                            >收货</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                v-show="scope.row.taskStatus>0"
                                @click="opTaskItem(scope.row, scope.$index)"
                            >收货明细</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>

    <detail-dialog
        v-if="dialogDetail"
        ref="detailDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogDetail = false"
    ></detail-dialog>

    <save-dialog
        v-if="dialogSave"
        ref="saveDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogSave = false"
    ></save-dialog>

    <task-dialog
        v-if="dialogTask"
        ref="taskDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogTask = false"
    ></task-dialog>

    <task-item-dialog
        v-if="dialogTaskItem"
        ref="dialogTaskItem"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogTaskItem = false"
    ></task-item-dialog>
</template>

<script>
import taskDialog from "../../taskOrder/task";
import taskItemDialog from "../../taskOrder/taskItem";
import detailDialog from "./detail";
import saveDialog from "./save";
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import config from "@/config";
export default {
    name: "giveOrder",
    components: {
        taskDialog,
        taskItemDialog,
        detailDialog,
        saveDialog,
        publicjs,
    },
    data() {
        return {
            dialogTask:false,
            dialogTaskItem:false,
            dialogDetail: false,
            dialogSave: false,
            receiveSave: false,
            showCondition: false,
            selectionRows: [],
            pkList: ["giveOrderId"],
            columnList: [],
            OrderList: { giveOrderId: "Asc" },
            queryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            props: {
                label: "storeName",
                value: "storeId",
            },
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsState: [],
            materialTypeTree: [],
            optionsGiveType:[],
            orgType: 0,
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {
        //查看
        opShow(row) {
            this.dialogDetail = true;
            this.$nextTick(() => {
                this.$refs.detailDialog.setData(row);
                this.$refs.detailDialog.open("Show");
            });
        },
        opApplyShow(row){
                this.$router.push({
                    path: "/apply/order",
                    query: { applyOrderCode: row.applyOrderCode },
                });
        },
        //查看
        opAdd() {
            this.dialogSave = true;
            this.$nextTick(() => {
                //this.$refs.detailDialog.setData(row);
                this.$refs.saveDialog.open("Add");
            });
        },
        //收货
        opTask(row) {
            this.dialogTask = true;
            this.$nextTick(() => {
                this.$refs.taskDialog.open("Task").setData([{orderCode:row.giveOrderCode,storeId:row.storeId,storeName:row.storeName,crName:row.giveName,crDate:row.giveDate,
                    expectedDate:"",taskStatusDesc:row.taskStatusDesc,taskOrderType:1,orderId:row.giveOrderId}]);
            });
        },
        //查看
        opTaskItem(row) {
            this.dialogTaskItem = true;
            this.$nextTick(() => {
                this.$refs.dialogTaskItem.open("Task").setData({orderCode:row.giveOrderCode,storeId:row.storeId,storeName:row.storeName,crName:row.giveName,crDate:row.giveDate,
                    expectedDate:"",taskStatusDesc:row.taskStatusDesc,taskOrderType:1,orderId:row.giveOrderId});
            });
        },
        opEdit(row){
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.setData(row);
                this.$refs.saveDialog.open("Edit");
            });
        },
        setRowClass({ row }) {
            let rowClass = "";
            if (this.selectionRows.includes(row)) {
                rowClass += " selected-row-color";
            }

            //终止
            if (row.status == 9) {
                rowClass += " selected-row-color-grey";
            }
            return rowClass;
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["PurchaseSaleType"] }
                );
                if (returnValue.status == 200) {
					var result=returnValue.response.find(p=>p.code=="PurchaseSaleType").optionsDetails;
                    this.optionsGiveType=result
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        async orgSelectProcess(rowData) {
            this.queryList.stores = [];
            this.queryList.storeIds = [];
            if (rowData && rowData.length > 0) {
                rowData.map((p, index) => {
                    if (p) {
                        this.queryList.stores = [
                            ...this.queryList.stores,
                            {
                                storeId: p.storeId,
                                storeName: p.storeName,
                            },
                        ];
                        this.queryList.storeIds = [
                            ...this.queryList.storeIds,
                            p.storeId,
                        ];
                    }
                });
            }
            await this.opBindData();
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        var giveOrderCode=this.$route.query.applyOrderCode;
        if(giveOrderCode){
            this.queryList.giveOrderCode=giveOrderCode;
        }
        await this.initOptions();
        await this.opBindData();
    },
};
</script>
<style lang="scss" scoped>
/* 当表格行处于悬停状态时改变背景颜色 */
::v-deep .el-table .el-table__row:hover {
    background-color: #dae8f7;
}
::v-deep .el-table__body .el-table__row--striped.hover-row td {
    background-color: #dae8f7 !important;
}
//   斑马纹选中颜色
::v-deep .el-table__body .el-table__row--striped.selected-row-color td {
    background-color: #b8dcff !important;
}
::v-deep .el-table {
    --el-table-row-hover-bg-color: #dae8f7;
}
::v-deep .el-table tr:nth-child(2n) {
    background: #f2f2f2;
}
</style>
<style>
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
.el-table .selected-row-color-grey {
    color: #000000 !important;
    text-decoration: line-through; /* 删除线 */
}
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
    background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > .el-table__row--striped {
    background-color: #b8dcff !important;
}
</style>
